<template>
  <div>
    <cart-header></cart-header>
    <body class="container">
      <div class="dxcartbg">
        <!-- 面包屑 -->
        <div class="w1200">
          <p class="bread-crumb">
            <a href="/" title="爱发表网">首页</a> &gt;
            <a href="/member/" title="会员中心">会员中心</a> &gt;
            <span>订单支付</span>
          </p>
        </div>

        <div class="w1200">
          <div class="cart_message cart_sucess">
            <div class="cart_message_con cart_list">
              <div class="dlsorder">
                <h4>您的订单已经提交成功！</h4>
                <p>1、请及时付款，完成付款后我们即刻开始派送。</p>
                <p>
                  2、订单详情可联系<a
                    href="javascript:;"
                    onClick="openChatDy(); return false;"
                    style="color: #00a1cc"
                    >在线客服</a
                  >核对。
                </p>
              </div>
              订单信息：
              <table>
                <tr>
                  <td width="150px" align="right">订单编号：</td>
                  <td>
                    <font color="red">20221127204736748801</font
                    ><a
                      href="/shop/order/show/id/16583/"
                      style="margin-left: 10px"
                      >[订单详情]</a
                    >
                  </td>
                </tr>
                <tr>
                  <td align="right">应付金额：</td>
                  <td>
                    <font color="red">&yen; 816.00</font>
                  </td>
                </tr>
                <tr>
                  <td align="right">支付方式：</td>
                  <td>
                    <font color="red" id="payment_name"></font>
                  </td>
                </tr>
                <tr class="fee hide">
                  <td align="right">手续费：</td>
                  <td>
                    <font color="red" id="payment_fee"></font>
                  </td>
                </tr>
                <tr class="fee hide">
                  <td align="right">合计支付：</td>
                  <td>
                    <font color="red">&yen; </font>
                    <font
                      color="red"
                      id="payment_price"
                      style="font-size: 16px; font-weight: bold"
                    ></font>
                  </td>
                </tr>
              </table>
              请选择支付：
              <ul class="payment_list">
                <li
                  data-id="9"
                  data-name="微信支付"
                  data-fee="0.00"
                  data-price="816.00"
                  data-url="/shop/order/submit/order/16583/payment/9/"
                >
                  <img
                    src="/img/pay_wechat.gif"
                    title="微信支付"
                    width="135"
                    height="70"
                  />
                  <p>微信支付</p>
                </li>

                <li
                  data-id="6"
                  data-name="支付宝（在线支付）"
                  data-fee="0.00"
                  data-price="816.00"
                  data-url="/shop/order/submit/order/16583/payment/6/"
                >
                  <img
                    src="/img/pay_alipay.gif"
                    title="支付宝（在线支付）"
                    width="135"
                    height="70"
                  />
                  <p>支付宝（在线支付）</p>
                </li>
              </ul>
              <div class="clear"></div>
            </div>
            <div class="cart_message_but">
              <a
                class="input-but input-but-big"
                href="/shop/order/payment/order/16583/"
                id="payment_url"
                >立即支付</a
              >
            </div>
          </div>
        </div>
        <div class="h20"></div>
      </div>
    </body>    
    <cart-footer></cart-footer>
  </div>
</template>
<script>
export default {
  beforeRouteEnter(to, from, next) {
    // 添加背景色 margin:0;padding:0是为了解决vue四周有白边的问题
    document.querySelector("body").setAttribute("style", "margin:0;padding:0");
    next();
  },
};
</script>
<style lang="scss" scoped>
div {
  display: block;
}
body,
h1,
h2,
h3,
h4,
h5,
h6,
dl,
dt,
dd,
ul,
ol,
li,
th,
td,
p,
blockquote,
pre,
form,
fieldset,
legend,
input,
button,
textarea,
hr {
  margin: 0px;
  padding: 0px;
  font-size: 12px;
  line-height: 30px;

  /* background: #FFF; */
}

ul {
  list-style: none;
}

html {
  font-size: 100%;
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}

::selection {
  background: #219bd9;
  color: #fff;
}
.container * {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -o-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
  // *behavior: url(../js/boxsizing.htc);
  // 转Vue第一次改动
  margin: 0 auto;
}
//内容页面样式
.dxcartbg {
  /* height: 610px; */
  margin: 5px auto;
  background-color: #219bd9;
  box-sizing: border-box;
}

.w1200 {
  width: 1284px;
  margin: 0 auto;
}

.bread-crumb {
  padding: 22px 0 22px 0;
  font-size: 13px;
  color: #fff;
}

.bread-crumb a {
  color: #fff;
}

a {
  /* color: #333; */
  text-decoration: none;
}

a:-webkit-any-link {
  /* color: -webkit-link; */
  cursor: pointer;
  /* text-decoration: underline; */
}

.cart_message {
  margin: 10px 0;
  padding: 22px 0 25px 0;
  background-color: #fff;
}

.cart_message_con {
  width: 800px;
  margin: 20px auto;
  line-height: 35px;
  text-align: left;
}

.dlsorder {
  margin-bottom: 15px;
  padding-bottom: 18px;
  border-bottom: 1px solid #e8e8e8;
}

.dlsorder h4 {
  margin-bottom: 14px;
  font-size: 24px;
  color: #333;
}

.dlsorder p {
  margin-bottom: 5px;
  line-height: 1.6;
  font-size: 12px;
  color: #333;
}

table {
  display: table;
  border-collapse: separate;
  /* box-sizing: border-box; */
  text-indent: initial;
  border-spacing: 2px;
  border-color: grey;
  transform: translateX(-86%);
}

ul.payment_list li {
  list-style: none;
  width: 160px;
  height: 88px;
  margin: 5px;
  border: 2px solid #dadada;
  cursor: pointer;
  float: left;
}

.clear {
  clear: both;
}

.cart_message .cart_message_but {
  margin: 30px auto;
  text-align: center;
}

.input-but {
  outline: medium;
  padding: 12px 22px;
  margin-left: 5px;
  margin-right: 5px;
  border-radius: 5px;
  background-color: #c41921;
  color: #fff;
  font-family: arial;
  font-size: 14px;
  vertical-align: middle;
  text-decoration: none;
}

.h20 {
  height: 20px;
  display: block;
  overflow: hidden;
}

ul.payment_list li p {
  height: 20px;
  line-height: 20px;
  background-color: #e2e2e2;
  text-align: center;
  overflow: hidden;
}
</style>